<style scoped lang="scss">
input{
    border: 1px solid #999;
    outline: none;
    padding: 5px 10px;
    border-radius: 5px;
    &:focus{
        border-color: cornflowerblue;
    }
}
</style>
<template>
    <div>
        <!-- 
            既然组件是一个可复用的 ，
            证明组件里面的代码，功能，
            可以放在任何一个需要它的地方；
            比如说：一个评分组件;
            一个地方需要显示评分，
            一个地方只需要显示评分的星星;

            这个时候就出现了，
            需要使用当前组件的地方，
            控制当前组件的一些参数，
            从而控制了，组件的UI页面;

            出现了一个专业名词，
            组件的父子通信
        -->
        <!-- 
            这个输入框有很多个，
            密码框，
            日期选择
         -->
        <input 
            :type="type" 
            :placeholder="PlaceHolder"
            :value="value">

            <!-- 
                因为vue组件是单向数据流 
                意思是只能父组件给子组件
                传值,并且在改变的时候告知子组件
                值改变了,这个时候,父子组件的参数是一致的
                如果在子组件当中,改变了父组件传的值,
                父组件不能够及时的得知,子组件的值
                发生了改变,也就是子组件的数据,
                无法传递给父组件;

                但是子组件可以使用自定义事件,
                通知给父组件,值发生了改变
            -->
        <!-- <button @click="value = 789">
            在Small.vue里面修改value值
        </button> -->
        <button @click="changeValue()">
            在Small.vue里面修改value值
        </button>
        <button @click="verify()">
            在Small.vue里面检测value值
        </button>
    </div>
</template>
<script>
    export default {
        // 父组件通过自定义属性传递值
        // 子组件需要 通过props对象接受
        // 父组件传递的值
        // 自定义属性有什么参数，
        // 在props里面接什么参数
        // props: [
        //     'type',
        //     'placeholder'
        // ]

        // 对象形式
        // props: {
        //     // 直接定义父组件传的值是什么数据类型
        //     // 如果出现一个意料之外的类型,Vue
        //     // 会给一个控制台的警告,但是作用依然显示
        //     type:String,
        //     // 定义多个传的可能值的类型
        //     placeholder: [String,Number]
        // }
        methods:{
            changeValue(){
                // console.log('用来改变value的值');
                // 在子组件定义自定义事件
                /* 
                    this.$emit('事件名',响应的值)

                    事件名,遵循变量命名规则
                */
                this.$emit('change',789);
            },
            verify(){
                console.log(this.value);
            }
        },
        // 对象形式  推荐写法
        props: {
            // 自定义的参数名字
            type: {
                // 数据类型
                type: String,
                // 默认值
                /* 
                    作用: 
                        如果父组件没有传递,
                        该参数,
                        需要一个默认值支撑
                */
               default: () => {
                    // 返回值
                    return 'password'
               }
            },
            PlaceHolder: String,
            value: [String,Number,null]
        }
    }
</script>